import React from 'react'
import styles from './index.css'

import { connect } from 'react-redux'
import { typeSwitch,netSubmitReceive,netSubmitRequest,netclearError } from '../../actions/network'

import select from '../../static/select.png'
import unSelect from '../../static/unselect.png'
import Item from '../Item'
import Dialog from '../Dialog'
import { Modal, Button,Spin ,Alert} from 'antd';
import 'antd/dist/antd.css';

class Network extends React.Component{
    constructor(props){
        super(props)
        const netType = this.props.netType
        this.state={value:netType==null?1:netType}
    }

    handleChange(val){
        this.setState({value:val})
    }
    handleSubmit(){
        const {dispatch} = this.props
        dispatch(netSubmitRequest())
    }
    handleClearError(){
        const {dispatch} = this.props
        dispatch(netclearError())
    }
    componentWillReceiveProps(){
        console.dir(this.props.error)
    }

    componentDidMount(){

    }
    render(){

        const submitLabel = this.props.netType==1?"拨号":"保存"
       // this.props.submitState?
        const loading=    <div style={{justifyContent:'center',textAlign:'center',backgroundColor:'#999',margin:"10px 10px",borderRadius:"5px",lineHeight:"40px"}} ><Spin/>拨号中...</div>
        const notLoading=    <div style={{cursor:'pointer',justifyContent:'center',textAlign:'center',backgroundColor:'#17A396',margin:"10px 10px",borderRadius:"5px",lineHeight:"40px"}} onClick={this.handleSubmit.bind(this)}>{submitLabel}</div>

        let ele=(<div style={{flex:1,display:'flex',flexFlow:'column'}}>
            {/*{this.props.submitState?<Dialog/>:''}*/}
            {/*{this.props.error.message==''?'':Modal.success({
                    title: '保存成功',
                    content: {msg},
                })}*/}

            {this.props.error.message==''?'':<Alert message={this.props.error.message} type="error" showIcon closable onClose={this.handleClearError.bind(this)} />}

            <div style={{'lineHeight':'40px','color':'#666'}}>请选择上网方式：{this.props.error.message}</div>

            <NetworkType type={this.props.netType} dispatch={this.props.dispatch}/>
            <div style={{marginTop:'20px',backgroundColor:'#fff',flex:'1',boxShadow:'0px 0px 5px #999'}}>
                {this.props.netType==1?<Pppoe dispatch={this.props.dispatch} network={this.props.network}/>:this.props.netType==2?<Dhcp/>:this.props.netType==3?<StaticIp/>: <Mobile/>}
                {this.props.submitState?loading:notLoading}
            </div>
        </div>)
        return ele
    }
}
const NetworkType = ({type,dispatch})=>{
    return (
        <ul className="network">
            <li onClick={()=>dispatch(typeSwitch(1))}>
                <div>宽带拨号</div>
                <div><img src={type==1?select:unSelect} alt=""/></div>
            </li>
            <li onClick={()=>dispatch(typeSwitch(2))}>
                <div>自动上网</div>
                <div ><img src={type==2?select:unSelect} alt=""/></div>
            </li>
            <li onClick={()=>dispatch(typeSwitch(3))}>
                <div>静态地址</div>
                <div ><img src={type==3?select:unSelect} alt=""/></div>
            </li>
            <li onClick={()=>dispatch(typeSwitch(4))}>
                <div>4G上网</div>
                <div ><img src={type==4?select:unSelect} alt=""/></div>
            </li>
        </ul>
    )
}
class Pppoe extends React.Component{
    constructor(props){
        super(props)
    }
    handleChange(event,field){
        const {dispatch} = this.props
        const data=event.target.value
        dispatch(netSubmitReceive({[field]:data}))
    }
    render(){
        return (<div>
            <Item labelText="宽带用户名" tips="请输入宽带用户名" value={this.props.network.username} onChange={(event)=>{this.handleChange(event,'username')}}></Item>
            <Item labelText="宽带密码" tips="请输入宽带密码" value={this.props.network.password} onChange={(event)=>{this.handleChange(event,'password')}}></Item>
        </div>)
    }
}

const Dhcp = ({dispatch})=>{
    return (<div >
        自动获取
    </div>)
}
const StaticIp = ({dispatch})=>{
    return (<div>
        静态IP
    </div>)
}
const Mobile = ({dispatch})=>{
    return (<div>
        4g
    </div>)
}


export default connect(state=>state.wan)(Network)